<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>首页</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
				font-family: "微软雅黑";
				text-decoration: none;
			}
			.body{
				background: rgb(245,245,245);
			}
			.clearfix:after {
				display: table;
				clear: both;
				content: "";
			}
			
			.fl {
				float: left;
			}
			
			.fr {
				float: right;
			}
			
			.head {
				background: rgb(255, 138, 0);
				height: 50px;
				width: 100%;
				position: fixed;
			}
			
			.head .logo {
				margin-left: 20px;
				margin-top: 5px;
			}
			
			.head .logo img {
				height: 40px;
			}
			
			.top_right {
				margin-right: 20px;
				margin-top: 10px;
			}
			
			.top_right img {
				cursor: pointer;
				height: 30px;
				margin-left: 20px;
			}
			
			.banner {
				position: relative;
				text-align: center;
			}
			
			.banner img {
				margin-top: 50px;
				width: 100%;
				cursor: pointer;
			}
			
			.banner .search {
				position: absolute;
				bottom: 10px;
				text-align: center;
				width: 86%;
				margin-left: 10px;
			}
			
			.search_txt {
				/*height: 30px;*/
				padding: 10px;
				width: 100%;
				margin: 0px auto;
				border-radius: 6px;
				border: 2px;
				box-shadow: 0 2px 12px rgb(185, 183, 184);
				text-indent: 2em;
				/*background-image:url(img/seach.jpg) no-repeat;
				background-size: 24px;
				background-position: center;*/
			}
			
			.search div img {
				position: absolute;
				width: 20px;
				bottom: 8px;
				left: 10px;
			}
			
			.menu {
				background: rgb(255, 138, 0);
				width: 100%;
				padding: 15px 0 15px 0px;
			}
			
			.menu div {
				float: left;
				width: 25%;
				/*background: red;*/
				color: white;
				text-align: center;
				cursor: pointer;
			}
			
			.menu div img {
				width: 50%;
			}
			
			.banner2 img {
				width: 100%;
			}
			
			.title {
				background: rgb(255, 138, 0);
				padding: 10px 20px 10px 20px;
				color: white;
			}
			
			.title h3 {
				font-weight: 400;
			}
			
			.title h4 {
				font-weight: 400;
				font-size: 12px;
			}
			.houses{
				background: white;
			}
			.house1 {
				/*	background: lightskyblue;*/
				border-bottom: 1px solid rgb(255, 138, 0);
				margin: 20px;
				padding: 10px 0 20px 0;
			}
			
			.house .fl {
				width: 30%;
			}
			
			.house1 .fl img {
				width: 90px;
				margin-top: 10px;
			}
			
			.house1 .fr h3 {
				font-size: 18px;
				font-weight: 300px;
				color: rgb(51, 51, 51);
				margin-top: 5px;
			}
			
			.house1 .fr h4 {
				font-size: 13px;
				font-weight: 400px;
				color: rgb(51, 51, 51);
				margin-top: 5px;
			}
			
			.house1 .fr h4 span {
				font-size: 14px;
				font-weight: 400px;
				color: rgb(255, 138, 0);
				float: right;
			}
			
			.house1 .fr h5 {
				font-size: 12px;
				font-weight: 200px;
				color: rgb(138, 138, 138);
				margin-top: 5px;
			}
			
			.house1 .fr h5 span {
				float: right;
			}
			
			.house1 .fr p {
				font-size: 12px;
				font-weight: 200px;
				color: rgb(135, 156, 177);
				margin-top: 5px;
			}
			
			.house1 .fr p span {
				background: rgb(222, 226, 235);
				border-radius: 2px;
				padding: 1px;
				margin-left: 5px;
			}
			.house3{
				border: 0px;
			}
			.bottom{
				background: rgb(47,49,48);
				width: 100%;
				color:rgb(154,156,155);
				padding-bottom: 20px;
			}
			.bottom a{
				color:rgb(154,156,155);
			}
			.bottom .title2{
				border-bottom: 1px solid rgba(154,156,155,0.1);
				padding:10px 0 10px 0;
				margin: 20px;
			}
			.kind{
				
				text-align: center;
				margin-top: 20px;
				
			}
			.kind img{
				margin-left: 100px;
			}
			.bottom .name{
				text-align: center;
				font-size: 12px;
				margin-top: 10px;
				
			}
			.name h4{
				margin-bottom: 10px;
			}
			.name p{
				margin: 10px;
			}
			.nav{
				   margin-top:5px;
					padding: 0px 0 20px 0;
					background: white;
			}
			.nav .links{
				display: none;
			} 
			.nav_name{
				/*background:gray;*/
				border-bottom: 1px solid rgb(255, 138, 0);
				color: rgb(169, 169, 169);
				font-size: 18px;
			}
			.nav .nav1{
				width: 50%;
				text-align: center;
				padding: 20px 0px 20px 0px;
			}
			.nav .nav1:hover{
				color: rgb(255, 138, 0);
				border-bottom: 2px solid rgb(255, 138, 0);
			}
			.nav .hot{
				margin: 20px;
				font-size: 16px;
			}
			.nav .hot a{
				color: rgb(103, 103, 103);
				line-height:30px;
			}
			.hot a:hover{
				color: rgb(255, 138, 0);
				
			}
			
		</style>
	</head>

	<body>
		<div class="content">
			<div class="head clearfix">
				<div class="logo fl"><img src="img/logo.jpg" /></div>
				<div class="top_right fr"><img src="img/my.jpg" /><img src="img/xiazai.jpg" /></div>
			</div>
			<div class="banner">
				<img src="img/banner.png" />
				<div class="search">
					<input type="text" placeholder="输入小区或商圈名开始找房咯！" class="search_txt" />
					<div><img src="img/seach.jpg" /></div>
				</div>
			</div>

			<div class="menu clearfix">
				<div>
					<img src="img/index_03.png" />
					<p>二手房</p>
				</div>
				<div>
					<img src="img/index_05.png" />
					<p>新房</p>
				</div>
				<div>
					<img src="img/index_07.png" />
					<p>租房</p>
				</div>
				<div>
					<img src="img/index_09.png" />
					<p>卖房</p>
				</div>
			</div>
			<div class="banner2"><img src="img/banner2.png" /></div>
			<div class="title">
				<h3>热门房源</h3>
				<h4>Hot house</h4>
			</div>
			<div class="houses">
				<div class="house1 clearfix">
				<div class="fl"><img src="img/img1.jpg" /></div>
				<div class="fr">
					<h3>文化部最T中间层 一层带...</h3>
					<h4>2室1厅 96㎡ 南北<span>1105万</span></h4>
					<h5>红庙北里<span>14268/平</span></h5>
					<p><span>学区房</span><span>独家</span></p>
				</div>
			</div>
			<div class="house1 clearfix">
				<div class="fl"><img src="img/img1.jpg" /></div>
				<div class="fr">
					<h3>光大水墨 精装复式 稀缺..</h3>
					<h4>2室1厅 96㎡ 南北<span>280万</span></h4>
					<h5>红庙北里<span>14268/平</span></h5>
					<p><span>学区房</span><span>独家</span><span>满五唯一</span></p>
				</div>
			</div>
			<div class="house1 house3 clearfix">
				<div class="fl"><img src="img/img1.jpg" /></div>
				<div class="fr">
					<h3>南北通透两居 精装修 无..</h3>
					<h4>2室1厅 96㎡ 南北<span>320万</span></h4>
					<h5>北京新天地<span>14268/平</span></h5>
					<p><span>地铁房</span><span>独家</span></p>
				</div>
			</div>
			</div>
			<div class="nav clearfix">
				<div class="nav_name clearfix">
					<div class="nav1 fl">热门关注</div>
				    <div class="nav1 nav2 fl">友情链接</div>
				</div>
				
				<div class="hot fl" id="hot">
					<p><a href="#">北京二手房</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">北京找房无忧</a></p>
					<p><a href="#">北京二手房价</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">青年家园</a></p>
					<p><a href="#">海定日租房</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">免税房源</a></p>
					<p><a href="#">朝阳新房</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">满五年唯一免税...</a></p>
				</div>
				<div class="links fl" id="links">
					<p><a href="#">北京二手房网</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">北京政府</a></p>
					<p><a href="#">二手房</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">腾讯娱乐</a></p>
					<p><a href="#">淘宝网</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">百度</a></p>
					<p><a href="#">新浪娱乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">新天地购物中心</a></p>
				</div>
			</div>
			<div class="bottom">
				<div class="title2">
					<a href="#">北京找房无忧网</a> >
					<a href="#">首页</a>
				</div>
				<div class="kind clearfix">
					<div class="img1 fl clearfix"><img src="img/apple.png" class="fl"/></div>
				    <div class="img2 clearfix fl"><img src="img/android.png" class="fl"/></div>
				</div>
				<div class="name">
					<h4>北京找房无忧房地产经纪有限公司</h4>
					<p>网络经营许可证 京ICP备20160812号-12</p>
				</div>
			</div>
		</div>
		
	</body>

</html>